<template>
    <div class="login-container">
        <!-- <template v-if="loginPage"> -->
        <div class="login-left">
            <img src="~assets/img/login/login-bg.jpg" class="login-left-bg">
        </div>
        <div class="login-right">
            <div class="login-right-alert">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
                    <div class="form-title">{{ loginTitle }}</div>
                    <el-form-item prop="username">
                        <el-input clearable placeholder="请输入用户名" class="input-control" v-model="loginForm.username">
                            <template slot="prepend"><i class="el-icon-user"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input clearable type="password" placeholder="请输入密码" class="input-control"
                            v-model="loginForm.password" show-password @keyup.enter.native="login">
                            <template slot="prepend" class="lock-icon"><i class="el-icon-lock"></i></template>
                        </el-input>
                    </el-form-item>
                    <div class="btn-row">
                        <!-- <el-button class="login-btn login-btn-left" @click="telTip">联系客服</el-button> -->
                        <el-button class="login-btn login-btn-right" type="primary" @click="login">登录</el-button>
                    </div>
                    <!-- <div class="btn-row">
                        <el-button type="primary" @click="salesMan(1)" v-if="loginPage != 1">管理员入口
                        </el-button>
                        <el-button type="primary" @click="salesMan(2)" v-if="loginPage != 2">业务员入口
                        </el-button>
                    </div> -->
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import {
    login, salesManLogin
} from "../network/login";
import { Loading } from "element-ui";
export default {
    data() {
        return {
            loginPage: 1,// 1  管理员登录   2  业务员登录  3 代理商登录
            loginForm: {
                username: "",
                password: ""
            },
            sale_loginForm: {
                username: "",
                password: ""
            },
            loginRules: {
                username: [{
                    required: true,
                    message: "请输入登录名称",
                    trigger: "blur"
                }],
                password: [{
                    required: true,
                    message: "请输入登录密码",
                    trigger: "blur"
                }]
            },
            loginTitle: '管理员登录'
        };
    },
    methods: {
        // 业务员入口
        salesMan(flag) {
            if (flag == 1) {
                this.loginTitle = '管理员登录'
                this.$message.success('切换为管理员登录');
            } else if (flag == 2) {
                this.loginTitle = '业务员登录'
                this.$message.success('切换为业务员登录');
            } else if (flag == 3) {
                this.loginTitle = '代理商登录'
                this.$message.success('切换为代理商登录');
            }
            this.loginPage = flag;
        },
        //客服提示弹窗
        telTip() {
            this.$alert(
                "人工客服：0431-81883497<br>周一至周五：(09:00-17:00)",
                "系统消息", {
                confirmButtonText: "确定",
                dangerouslyUseHTMLString: true
            }
            );
        },
        //登录
        login() {
            this.$refs.loginForm.validate(valid => {
                if (!valid) return false;
                const loading = Loading.service({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.1)"
                });
                setTimeout(() => {
                    loading.close();
                    if (this.loginForm.username != 'admin' || this.loginForm.password != 'ztyx2024') {
                        this.$message.error('账号或密码错误');
                        return
                    }
                    sessionStorage.setItem("Authorization", 'ztyx2024');
                    this.$message.success("登录成功");
                    this.$router.replace("/homePage");
                }, 500);

                return

                login({
                    shop_account: this.loginForm.username,
                    shop_pass: this.loginForm.password
                })
                    .then(res => {
                        console.log(res);
                        if (res.flag) {
                            if (res.data.flag == "error") {
                                this.$message.error(res.data.msg);
                                return this.$refs.loginForm.resetFields();
                            } else {
                                window.sessionStorage.setItem("Authorization", res.data.token);
                                window.sessionStorage.setItem("shop_id", res.data.manager.shopId);
                                window.sessionStorage.setItem("user_id", res.data.manager.managerId);
                                window.sessionStorage.setItem("manager_name", res.data.manager.managerName);
                                window.sessionStorage.setItem("roleId", res.data.manager.roleId);
                                window.sessionStorage.setItem("managerNote", res.data.manager.managerNote);
                                this.$message.success("登录成功");
                                this.$router.replace("/home");
                            }
                        } else {
                            this.$message.error(res.data);
                            return this.$refs.loginForm.resetFields();
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });

            });
        }
    },
    created() {
        if (window.sessionStorage.getItem('timeout') === 'true') {
            this.$notify({
                title: '提示',
                type: 'warning',
                message: '登录超时，请重新登录！',
                duration: 0,
                customClass: 'notify-control'
            });
        }
    }
};
</script>

<style scoped>
.sales_man {
    position: absolute;
    bottom: 60px;
    right: 4%;
}

.login-container {
    display: flex;
    width: 100%;
    height: 100%;
    background: #FFF;
    min-width: 1300px;
}

.login-left {
    height: 100%;
    overflow: hidden;
}

.login-right {
    position: relative;
    width: 44%;
    height: 100%;
    flex: 1;
}

.login-left-bg {
    display: block;
    height: 100%;
}

.bg-image {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.login-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9;
    width: 1200px;
    height: 600px;
    margin-top: -300px;
    margin-left: -600px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 5px 30px #224aae;
}

.report {
    position: fixed;
    bottom: 56px;
    left: 0;
    z-index: 8;
    width: 100%;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
    opacity: 0.6;
}

.illustration-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.illustration {
    display: block;
    width: 440px;
}

.el-row {
    height: 100%;
}

.el-form {
    width: 400px;
    position: relative;
    top: 400px;
}

.form-title {
    position: relative;
    width: 100%;
    font-size: 38px;
    /* font-weight: bold; */
    color: #333;
    text-align: center;
    margin-bottom: 86px;
}

.form-title::before {
    content: '';
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -38px;
    width: 76px;
    height: 8px;
    background: #f0f4ff;
    border-radius: 4px;
}

.login-btn {
    width: 186px;
    height: 42px;
    border-radius: 21px;
    font-size: 18px;
}

.btn-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 100px;
}

.login-right-alert {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 482px;
    height: 396px;
    margin-top: -198px;
    margin-left: -241px;
}

.login-btn-left {
    background: #f5f8ff;
    color: #409eff;
    border: none;
}

.login-btn-right {
    margin-left: 28px;
}

::v-deep.input-control __inner {
    height: 48px;
    border-radius: 0 8px 8px 0;
    background: #f5f8ff;
    border: none;
}

::v-deep.input-control .el-input-group__prepend {
    border-radius: 8px 0 0 8px;
    background: #409eff;
    color: #FFF;
    font-size: 18px;
    border: none;
}
</style>
